<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <th:block th:include="/common/head::head('广告机 - 广告机管理后台')"/>

</head>
<!--/* <editor-fold desc="define"> */-->
<!--/*@thymesVar id="loginUser" type="com.xmlan.machine.module.user.entity.User"*/-->
<!--/*@thymesVar id="adminPath" type="java.lang.String"*/-->
<!--/*@thymesVar id="page" type="com.github.pagehelper.PageInfo<com.xmlan.machine.module.advertisementMachine.entity.AdvertisementMachine>"*/-->
<!--/*@thymesVar id="name" type="java.lang.String"*/-->
<!--/* </editor-fold> */-->
<body>
<th:block th:include="/common/header::header('monitor')"/>
<main style="z-index: 0;">
    <div class="page-title z-depth-1 blue-grey darken-2">
        <div class="white-text">
      <span class="flow-text">
        <a class="btn-flat"><i class="material-icons white-text">list</i></a>摄像头列表
      </span>
        </div>
    </div>
<div id="main-content" class="container" style="height: 800px">
    <table class="highlight responsive-table" id="monitorData">
        <thead>
            <tr>
                <th>名称</th>
                <th>地址</th>
                <th>监控状态</th>
                <th>查看监控</th>
            </tr>
        </thead>
        <tbody class="card">
        <tr th:each="item:${page.list}">
            <td th:text="*{item.name}">name</td>
            <td th:text="*{#strings.abbreviate(item.addrStr,30)}">address</td>
            <td >开</td>
            <td ><a class="btn-floating blue waves-effect waves-light tooltipped btn modal-trigger"
                    data-position="top" data-delay="50" data-tooltip="查看实时监控"
                    th:onmouseover="'javascript:callCamera(\''+*{item.cameraSequence}+'\',\''+*{item.cameraVerificationCode}+'\',\''+*{item.accessToken}+'\')'">查看</a></td>
        </tr>
        </tbody>
    </table>
    <div id="pagination-div" class="center">
        <ul class="pagination">
            <li th:if="${!page.hasPreviousPage}" class="disabled">
                <a href="#"><i class="material-icons">chevron_left</i></a>
            </li>
            <li th:if="${page.hasPreviousPage}" class="waves-effect">
                <a th:href="@{${adminPath}+'/monitor/list/'+${page.prePage}}"><i
                        class="material-icons">chevron_left</i></a>
            </li>
            <th:block th:each="number:${page.navigatepageNums}">
                <li th:if="${number==page.pageNum}" class="waves-effect" id="active-page">
                    <a href="#" th:text="${number}"></a>
                </li>
                <li th:if="${number!=page.pageNum}" class="waves-effect">
                    <a th:href="@{${adminPath}+'/monitor/list/'+${number}}"
                       th:text="${number}"></a>
                </li>
            </th:block>
            <li th:if="${!page.hasNextPage}" class="disabled">
                <a href="#"><i class="material-icons">chevron_right</i></a>
            </li>
            <li th:if="${page.hasNextPage}" class="waves-effect">
                <a th:href="@{${adminPath}+'/monitor/list/'+${page.nextPage}}"><i
                        class="material-icons">chevron_right</i></a>
            </li>
        </ul>
    </div>
</div>
</main>
<th:block th:include="/common/footer::footer"/>
<th:block th:include="/common/script::script"/>
</body>
</html>
<script type="text/javascript">
    var machineStr;
    $(function () {
        // index();
    })
    function index() {
        $.ajax({
            url:"[[${adminPath}]]/monitor/index",
            type:"GET",
            data:{"pageNo":1},
            success:function (machine) {
                machineStr =eval('(' + machine + ')');
                $.each(machineStr,function (idx, obj) {
                    var user = {id:1, name:'zs'};
                    var idxx;
                    var code;
                    var access_token;
                    idxx =machineStr[idx].cameraSequence;
                    code =machineStr[idx].cameraVerificationCode;
                    access_token =machineStr[idx].accessToken;
                    var codes = {idxx:idxx, code:code};
                    var tr =
                        "<tr>"+
                            "<td>"+machineStr[idx].name+"</td>"+
                            "<td>"+machineStr[idx].address+"</td>"+
                            "<td>"+"开"+"</td>"+
                            // "<td>"+"<a href='/mng/monitor/demo'>"+"查看"+"</a>"+"</td>"+
                            "<td>"+"<a href=\"javascript:;\" onclick=\"callCamera('"+idxx+"','"+code+"','"+access_token+"')\">"+"查看"+"</a>"+"</td>"+
                        "</tr>";
                    $("table").append(tr);
                });
            },error:function () {
            }
        });
    }
    function callCamera(cameraSequence,cameraVerificationCode,access_token) {
        window.location='/mng/monitor/uikit?cameraSequence='+cameraSequence+'&cameraVerificationCode='+cameraVerificationCode+'&access_token='+access_token
    }
    function demo() {
        $.get("[[${adminPath}]]/monitor/demo",function () {
        });
    }
</script>